<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 
		 animation：常用来实现复杂的动画效果
		 @keyframes 动画名称 {
			 0% {
			 }
			 100% {
			 }	 
		 }
		 必须写两个参数：animation-name和animation-duration持续时间
		 animation-timing-function：速度曲线
		 animation-delay：动画何时开始
		 animation-iteration-count：播放次数
		 animation-play-state：动画是否正在运行或暂停
		 animation-fill-mode：动画结束的状态
		 animation-direction：方向
		 
		 动画简写：
		 animation：动画名称  持续时间  运动曲线  何时开始  播放次数  是否反方向  动画起始或者结束的状态
		 
		 速度曲线之steps：时间函数中的间隔数量（步长），分几步来完成动画
		 
		 -->
	</body>
</html>
